<script>
import { fabric } from "fabric";

export default {
  name: "Certification",
  data() {
    return {
      canvas: null,
      consoleJson: "",
    };
  },
  methods: {
    getAllElements() {
      console.log(this.canvas.getObjects());
      console.log(JSON.stringify(this.canvas));
      this.consoleJson = JSON.stringify(this.canvas);
    },
    addText() {
      let text = new fabric.Textbox(
        "大家好~这里是前埔寨\n我是荣顶~\n一个要成为开发王的男人!",
        {
          fontFamily: "Comic Sans", //字体
          fontSize: 50, //字号
          fontWeight: 800, //字体粗细,可以使用关键字（“normal”，“bold”）或数字（100,200,400,600,800）
          underline: true, //下划线
          overline: true, //上划线
          fontStyle: "italic", //字体风格,normal（正常）或italic（斜体）
          stroke: "#c3bfbf", //描边的颜色
          strokeWidth: 1, //描边的宽度
          textAlign: "center", //文本对齐方式
          lineHeight: 1.5, //行高
          textBackgroundColor: "#91A8D0", //文本背景颜色
        }
      );
      this.canvas.add(text);
    },
    addImage() {
      fabric.Image.fromURL(require("../assets/3.png"), (img) => {
        img.scale(0.2);
        this.canvas.add(img);
      });
    },
    addRect() {
      // 创建一个矩形对象
      let rect = new fabric.Rect({
        left: 200, //距离左边的距离
        top: 200, //距离上边的距离
        fill: "green", //填充的颜色
        width: 200, //矩形宽度
        height: 200, //矩形高度
      });

      // 将矩形添加到canvas画布上
      this.canvas.add(rect);
    },
    removeSelected() {
      const activeObjects = this.canvas.getActiveObjects();
      this.canvas.discardActiveObject();
      if (activeObjects.length) {
        this.canvas.remove.apply(this.canvas, activeObjects);
      }
    },
  },
  mounted() {
    this.canvas = new fabric.Canvas(document.getElementById("canvas"));
    this.canvas.selection = true;
    fabric.Image.fromURL(require("../assets/1.png"), (img) => {
      img.set({
        // 通过scale来设置图片大小，这里设置和画布一样大
        scaleX: this.canvas.width / img.width,
        scaleY: this.canvas.height / img.height,
      });
      // 设置背景
      this.canvas.setBackgroundImage(
        img,
        this.canvas.renderAll.bind(this.canvas)
      );
      this.canvas.renderAll();
    });
  },
};
</script>

<template>
  <div class="demo">
    <canvas id="canvas" width="800" height="800"></canvas>
    <div style="height: 800px">
      <el-button size="small" type="primary" @click="addRect"
        >添加矩形</el-button
      >
      <el-button size="small" type="primary" @click="addImage"
        >添加图片</el-button
      >
      <el-button size="small" type="primary" @click="addText"
        >添加文本</el-button
      >
      <el-button size="small" type="primary" @click="removeSelected"
        >移除选中元素</el-button
      >
      <el-button size="small" type="primary" @click="getAllElements"
        >获取全部元素</el-button
      >
    </div>
  </div>
</template>

<style scoped lang="less">
.demo {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  canvas {
    border: 1px solid #000000;
  }
}
</style>
